<!DOCTYPE html>
<html lang="en" data-ng-app="stageCue" data-ng-controller="sc.app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ShowCueWeb</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ng-sortable.min.css">
    <link rel="stylesheet" href="css/bg-splitter.css">
    <link rel="stylesheet" href="css/xeditable.css">
    <link rel="stylesheet" href="css/index.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script src="js/xeditable.min.js"></script>
    <script src="js/prefixfree.min.js"></script>
    <script src="js/ng-sortable.js"></script>
    <script src="js/ng-contextmenu.js"></script>
    <script src="js/ng-filesystem.js"></script>
    <script src="js/bg-splitter.js"></script>
    <script src="js/stagecue-app.js"></script>
    <script src="js/stagecue-app-library.js"></script>
    <script src="js/stagecue-app-cuesheet.js"></script>
    <script src="js/stagecue-cueengine.js"></script>
    <script src="js/stagecue-userconfig.js"></script>
    <script src="js/stagecue-library.js"></script>
    <script src="js/stagecue-renderer.js"></script>
    <script src="js/workspace-loader.js"></script>
  </head>
  <body>

  <table style="width: 100%; height: 100%; display: table;">
    <tr height="60"><td>
      <div class="navbar navbar-default" data-ng-class="{'show-running': cueEngine.running}">
        <div class="navbar-header">
          <span class="navbar-brand" style="font-variant: small-caps"><a href="https://github.com/sam0737/ShowCueWeb" target="_blank">ShowCueWeb</a></span>
        </div>
        <div class="navbar-collapse">
          <form class="navbar-form navbar-right">
            <span class="btn" style="cursor: default; border: 3px dashed white" data-to-url-drop-target data-url-drop="urlDrop(results)">Drop to convert to Data URL</span>
            <button class="btn btn-default" data-ng-click="downloadConfig()" data-ng-show="stageReady" 
              tooltip-placement="bottom" tooltip="Save as 'config.js' in the workspace">Download Config</button>
            <button class="btn btn-danger" data-ng-click="resetConfig()" data-ng-hide="stageReady">Reset Config</button>
          </form>
        </div>
      </div>
    </td></tr>
    <tr height="100%"><td>
      <div class="workspace" id="workspace-drop" data-ng-hide="stageReady">
        <span>
          Drop a folder here as workspace to start
        </span>
      </div>
      <div class="workspace" id="workspace-active" data-ng-show="stageReady">
        <bg-splitter data-ng-attr-orientation="horizontal" data-ng-attr-init-pos="300">
          <bg-pane data-ng-attr-min-size="100" id="library-cell">
            <!-- Library -->
            <div class="panel panel-primary" id="library-panel" data-ng-controller="sc.app.library">
              <div class="panel-body">
                <div style="text-align: right;">
                  <button type="button" class="btn btn-default" data-ng-click="stopPreview()" data-ng-show="itemPreviewing">
                    <span class="glyphicon glyphicon-stop"></span> Stop</span>
                  </button>
                  <button type="button" class="btn btn-default btn-primary" data-ng-click="showAddResource()">
                    <span class="glyphicon glyphicon-plus"></span> Add</span>
                  </button>
                </div>
                <div class="list-group" data-as-sortable="libraryDragOptions" data-ng-model="items">
                  <div class="list-group-item library-item" data-ng-repeat="i in items" data-as-sortable-item data-ng-click="addToCueSheet(i)">
                    <div data-as-sortable-item-handle></div>                    
                    <div data-ng-class="{'item-previewing': i.previewing}">
                      <div data-ng-if="i.type == 'audio'"
                           data-ng-attr-context-menu="partials/library-context.html" data-ng-model="i">
                        <div class="item-name">{{ i.name }}</div><canvas data-draw-audio data-ng-attr-audio-buffer="i.buffer"></canvas>
                      </div>
                      <div data-ng-if="i.type == 'video' || i.type == 'html' || i.type == 'image'"
                           data-ng-attr-context-menu="partials/library-context.html" data-ng-model="i">
                        <div class="item-name">{{ i.name }}</div>
                      </div>
                      <div data-ng-if="i.type == 'audio-control'">
                        Audio Control
                      </div>
                      <div data-ng-if="i.type == 'visual-control'">
                        Visual Control
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </bg-pane>
          <bg-pane data-ng-attr-min-size="150">
            <div data-ng-controller="sc.app.cueSheet">
              <bg-splitter data-ng-attr-orientation="vertical">
                <bg-pane data-ng-attr-min-size="100">
                  <div class="panel">
                  <!-- Control Panel -->
                    <table class="cuesheet" id="master">
                      <colgroup>
                        <col>
                        <col>
                      </colgroup>
                      <tbody>
                        <tr>
                          <td class="cue-handle"></td>
                          <td id="master-cell" data-ng-class="{'show-running': cueEngine.running}">
                            <h1 id="running-cue"><span class="cue-tag">Live</span> {{ cueEngine.running ? cueEngine.cues[cueEngine.current].description : '' || '' }}</h1>
                            <div class="btn-group" role="group">
                              <button type="button" class="btn btn-success btn-lg" data-ng-click="go()" tooltip="Space" data-ng-class="{'active': cueEngine.running}"><span class="glyphicon glyphicon-play"></span> Go</button>
                              <button type="button" class="btn btn-default btn-lg" data-ng-click="stop()" tooltip="Esc"><span class="glyphicon glyphicon-stop"></span> Stop</button>
                            </div>
                            <button type="button" class="btn btn-default btn-sm" data-ng-click="reapplyChannels()">Reload Screen</button>
                            <h2 id="standby-cue">
                              <span data-ng-show="cueEngine.cues[cueEngine.current]">
                                <span class="cue-tag" data-ng-hide="cueEngine.cues[cueEngine.current].goMode != 0 && cueEngine.running">Standby</span>
                                <span class="cue-tag" data-ng-show="cueEngine.cues[cueEngine.current].goMode != 0 && cueEngine.running">Auto Next</span>
                                {{ (cueEngine.cues[cueEngine.current + (cueEngine.running ? 1 : 0)].description || '') }}
                              </span>
                            </h2>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </bg-pane>
                <bg-pane data-ng-attr-min-size="50">
                  <!-- Cue Sheet -->
                  <div class="panel panel-warning" id="cuesheet-cell">
                    <table class="cuesheet" id="cuesheet">
                      <colgroup>
                        <col>
                        <col>
                        <col class="channel" data-ng-repeat="i in channels" data-ng-class="{'channel-show': i.type == 'show'}">
                        <col class="channel-tail">
                      </colgroup>
                      <thead>
                        <tr data-as-sortable="channelDragOptions" data-ng-model="channels">
                          <th class="cue-handle"></th>
                          <th>
                            Cue
                            <button type="button" class="btn btn-default btn-xs" data-ng-click="addShowChannel()"><span class="glyphicon glyphicon-plus"></span> Channel</button>
                          </th>
                          <th class="channel" data-ng-repeat="i in channels" 
                              data-as-sortable-item 
                              data-ng-attr-context-menu="partials/channel-context.html"
                              data-ng-class="{'channel-show': i.type == 'show'}"
                              data-ng-dblclick="configureChannel(i)"
                              >
                            <div data-buttons="no" data-blur="submit" data-editable-text="i.name" data-onaftersave="flush()" data-as-sortable-item-handle>{{ i.name || '...' }}</div>
                          </th>
                          <th class="channel-tail"></th>
                        </tr>
                      </thead>
                      <tbody data-as-sortable="cueDragOptions" data-ng-model="cues">
                        <tr class="cue" data-ng-repeat="c in cues" data-ng-dblclick="setCurrentAt($index)"
                            data-ng-class="{'current': engine.current == $index, 'cue-go-with-next': c.goMode == 1, 'cue-go-after-this': c.goMode == 2}"
                            data-scroll-into-view-if="engine.current == $index"
                            data-as-sortable="cueItemDragOptions" data-ng-model="c.items"> <!--  data-as-sortable-item data-as-sortable-item-up -->
                          <td class="cue-handle"></td> <!--  data-as-sortable-item-handle -->
                          <td class="cue-description" style="position: relative"
                              data-ng-attr-context-menu="partials/cue-context.html">
                            <span data-buttons="no" data-blur="submit" data-editable-text="c.description" data-onaftersave="flush()">{{ c.description || '...' }}</span>
                            <span class="cue-properties">
                              <span data-ng-If="c.goMode == 1" class="glyphicon glyphicon-link" title="Go with next immediately"></span>
                              <span data-ng-If="c.goMode == 2" class="glyphicon glyphicon-chevron-down" title="Go after this"></span>
                            </span>
                          </td>
                          <td data-ng-repeat="i in c.items" data-as-sortable-item class="cue-item-cell">
                            {{ config = c.configs[$index]; '' }}
                            <div class="cue-item no-select" data-ng-dblclick="configureCueItem(c, $index)">
                              <div data-as-sortable-item-handle class="cue-item cue-item-audio" data-ng-if="i.type == 'audio'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.gain != null" class="glyphicon glyphicon-sort" data-ng-attr-title="Gain set to {{config.gain}}"></span>
                                  <span data-ng-If="config.delay != null" class="glyphicon glyphicon-time" data-ng-attr-title="Delay for {{config.delay}}"></span>
                                  <span data-ng-If="config.loop[0] != null && config.loop[1] != null" class="glyphicon glyphicon-repeat" 
                                    data-ng-attr-title="Loop from {{ config.loop[0] }} to {{ config.loop[1] }}"></span>
                                  <span data-ng-If="config.range[0] != null && config.range[1] != null" class="glyphicon glyphicon-resize-horizontal" 
                                    data-ng-attr-title="Range from {{ config.range[0] }} to {{ config.range[1] }}"></span>
                                  <span data-ng-If="config.allowOverlap" class="glyphicon glyphicon-pushpin" data-ng-attr-title="Allow overlap"></span>
                                </span>
                                {{ i.name || '' }}
                              </div>
                              <div data-as-sortable-item-handle class="cue-item cue-item-audio-control" data-ng-if="i.type == 'audio-control'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.waitActive" class="glyphicon glyphicon-time" data-ng-attr-title="Wait active"></span>
                                  <span data-ng-If="config.killActive" class="glyphicon glyphicon-stop" data-ng-attr-title="Kill active"></span>
                                  <span data-ng-If="config.killAll" class="glyphicon glyphicon-th-large" data-ng-attr-title="Kill all"></span>
                                  <span data-ng-If="config.fadeTo != null && config.fadeRange[0] != null && config.fadeRange[1] != null" class="glyphicon glyphicon-sort"
                                    data-ng-attr-title="Fade to {{ config.fadeTo }} from {{ config.loop[0] }} to {{ config.loop[1] }}"></span>
                                </span>
                                {{ i.name }}
                              </div>
                              <div data-as-sortable-item-handle class="cue-item cue-item-video" data-ng-if="i.type == 'video'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.allowOverlap" class="glyphicon glyphicon-pushpin" data-ng-attr-title="Allow overlap"></span>
                                  <span data-ng-If="config.opacity != null" class="glyphicon glyphicon-eye-open" data-ng-attr-title="Initial opacity is {{config.opacity}}"></span>
                                  <span data-ng-If="config.delay != null" class="glyphicon glyphicon-time" data-ng-attr-title="Delay for {{config.delay}}"></span>
                                </span>
                                {{ i.name || '' }}
                              </div>
                              <div data-as-sortable-item-handle class="cue-item cue-item-image" data-ng-if="i.type == 'image'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.allowOverlap" class="glyphicon glyphicon-pushpin" data-ng-attr-title="Allow overlap"></span>
                                  <span data-ng-If="config.opacity != null" class="glyphicon glyphicon-eye-open" data-ng-attr-title="Initial opacity is {{config.opacity}}"></span>
                                  <span data-ng-If="config.delay != null" class="glyphicon glyphicon-time" data-ng-attr-title="Delay for {{config.delay}}"></span>
                                </span>
                                {{ i.name || '' }}
                              </div>
                              <div data-as-sortable-item-handle class="cue-item cue-item-html" data-ng-if="i.type == 'html'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.allowOverlap" class="glyphicon glyphicon-pushpin" data-ng-attr-title="Allow overlap"></span>
                                  <span data-ng-If="config.opacity != null" class="glyphicon glyphicon-eye-open" data-ng-attr-title="Initial opacity is {{config.opacity}}"></span>
                                  <span data-ng-If="config.delay != null" class="glyphicon glyphicon-time" data-ng-attr-title="Delay for {{config.delay}}"></span>
                                </span>
                                {{ i.name || '' }}
                              </div>
                              <div data-as-sortable-item-handle class="cue-item cue-item-visual-control" data-ng-if="i.type == 'visual-control'">
                                <span class="cue-properties">
                                  <span data-ng-If="config.waitActive" class="glyphicon glyphicon-time" data-ng-attr-title="Wait active"></span>
                                  <span data-ng-If="config.killActive" class="glyphicon glyphicon-stop" data-ng-attr-title="Kill active"></span>
                                  <span data-ng-If="config.killAll" class="glyphicon glyphicon-th-large" data-ng-attr-title="Kill all"></span>
                                  <span data-ng-If="config.delay != null" class="glyphicon glyphicon-time" data-ng-attr-title="Delay for {{config.delay}}"></span>
                                  <span data-ng-If="config.script != null" class="glyphicon glyphicon-edit" data-ng-attr-title="Has custom script"></span>
                                  <span data-ng-If="config.fadeTo != null && config.fadeRange[0] != null && config.fadeRange[1] != null" class="glyphicon glyphicon-sort"
                                    data-ng-attr-title="Fade to {{ config.fadeTo }} from {{ config.loop[0] }} to {{ config.loop[1] }}"></span>
                                </span>
                                {{ i.name }}
                              </div>
                            </div>
                          </td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </bg-pane>
              </bg-splitter>
            </div>
          </bg-pane>
        </bg-splitter>
      </div>
    </td></tr>
  </table>
  </body>
</html>

